<template>
	<view class="box">
		<view class="head">
			<view class="list_1">
				<view class="item_1">
					<view class="l" v-if="activityData && activityData.activityStartTime">
						<view class="title">{{activityData.activityName}}</view>
						<view class="time">
							<image src="https://honor-hall.oss-cn-chengdu.aliyuncs.com/time.png" mode="aspectFill"></image>{{activityData.activityStartTime.slice(0,10).replace(/-/g,'.')}}-{{activityData.activityEndTime.slice(0,10).replace(/-/g,'.')}}
						</view>
						<view v-if="activityData.activityStartTime>currTime" class="btn">未开始</view>
						<view v-else-if="activityData.activityEndTime<currTime" class="btn bout">已结束</view>
						<view v-else class="btn bin">进行中</view>

					</view>
					<view class="r">
						<image :src="activityData.activityPoster" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="media">
				<view class="title">上传{{title}}*</view>
				<view v-if="pic" class="file">
					<video v-if="activityData.clockInType>1" :src="pic" controls ></video>
					<image v-else :src="pic" show-menu-by-longpress mode="aspectFill" @click="handleFile"></image>
					<view class="btn" @click="handleRemove">删除</view>
				</view>
				<view v-else class="box" @click="handleMedia">
					<image src="https://honor-hall.oss-cn-chengdu.aliyuncs.com/05.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="words">
				<view class="title">上传{{txt}}*</view>
				<view class="text">
					<textarea class="ta" :maxlength="maxNum" v-model="content" :placeholder="'请输入'+txt"></textarea>
				</view>
				<view class="num">{{strLen}}/{{maxNum}}</view>
			</view>
		</view>
		<view class="foot">
			<view class="box">
				<view class="btn_r" :class="true?'':'over'" @click="onClick">
					提交
				</view>
			</view>
		</view>
		<!-- <view class="modal" v-if="showModal">
			<view class="box">
				<view class="h">
					请选择上传类型
				</view>
				<view class="m">
					<view class="btn sel">图片</view>
					<view class="btn">视频</view>
				</view>
				<view class="f" @click="handleClose">取消</view>
			</view>
			<view class="close" @click="handleClose">
				<image src="../../../static/image/close.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="mask" v-if="showModal"></view> -->
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { getUrlParamsInH5, getUrlParamsInWeixin, rpx2px, wxSetUpShareFunction } from "../../../utils/utils";
import { onShow } from '@dcloudio/uni-app';
import { getActivityDetailApi, getUserVoteListApi,addUserVoteApi,doSign } from '../../../api/activity';
import { uploadToOss } from '../../../utils/uploadFile';

let strLen = computed(()=>{
	return content.value.length
})
onShow(()=>{
	/* #ifdef MP-WEIXIN */
	activityId.value = getUrlParamsInWeixin()?.id
	vote.value = getUrlParamsInWeixin()?.vote
	wxSetUpShareFunction()
	/* #endif */
	/* #ifdef H5 */
	activityId.value = getUrlParamsInH5()?.id
	vote.value = getUrlParamsInH5()?.vote
	/* #endif */
	getActivityData()
	if (vote.value>0) {
		txt.value = '语录'
	}
})
let today = new Date()
const year = today.getFullYear();
const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
const hours = ('0' + today.getHours()).slice(-2);
const minutes = ('0' + today.getMinutes()).slice(-2);
const seconds = ('0' + today.getSeconds()).slice(-2);
const dateStr = `${year}-${month}-${day}`
const timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
const currDate = ref(dateStr)
const currTime = ref(timeStr)
const maxNum = ref(500)
const activityId = ref('')
const activityData = ref({})
const vote = ref(0)
const title = ref('图片')
const txt = ref('语录')
const content = ref('')
const pic = ref('')

const handleRemove = () => {
	pic.value = ''
}
const handleFile = () => {
	uni.previewImage({
		urls:[pic.value]
	})
}

const handleMedia = () => {
	const mediaType = vote>0 ? ['image']:activityData.value.clockInType>1? ['video']:['image']

	uni.chooseMedia({
	  count: 1,
	  mediaType: mediaType,
	  sourceType: ['album', 'camera'],
	  maxDuration: 15,
	  sizeType:['original', 'compressed'],
	  camera: 'back',
	  success(res) {
      let imgSize = ref(res.tempFiles[0].size /1000000)
      let quality = ref(100)
      if(imgSize.value > 5 && imgSize.value <= 7) {
        quality.value = 70
      } else if(imgSize.value > 7 && imgSize.value <= 15) {
        quality.value = 60
      } else if(imgSize.value > 15 && imgSize.value <= 25) {
        quality.value = 50
      } else {
        quality.value = 30
      }
      uni.compressImage({
        src: res.tempFiles[0].tempFilePath,
        quality: quality.value,
        success: res => {
          uploadToOss(res.tempFilePath).then(res=>{
            console.log('上传成功！--------',res)
            pic.value = res.url
          })
        }
      })

		// const key = res.tempFiles[0].tempFilePath.slice(10)
		// const fs = uni.getFileSystemManager()
		// const file = fs.readFileSync(res.tempFiles[0].tempFilePath)
		/*uploadToOss(res.tempFiles[0].tempFilePath).then(res=>{
			console.log('上传成功！--------',res)
			pic.value = res.url
		})*/
	  }
	})
}

const getActivityData = async () => {
	const { code, data } = await getActivityDetailApi(activityId.value);
	if (code === 200) {
	  data.residueDay = !!data.residueDay ? Number(data.residueDay) : 0;
	  activityData.value = { ...data };
	  if (data.clockInType>1) {
	  	title.value = '视频'
	  }
	}
}
const onClick = async () => {
	if (activityData.value.activityEndTime<currTime.value) {
		const msgStr = vote.value>0 ? '投票已结束无法投票':'挑战已结束无法打卡'
		uni.showToast({
			icon:'none',title:msgStr
		})
		return false
	}
	if (vote.value > 0) {
    if (!pic.value || pic.value === '') {
      uni.showToast({
        icon:'none',title: `请上传${title.value}`
      })
      return false
    }
    if (!content.value) {
      uni.showToast({
        icon:'none',title:`请上传内容`
      })
      return false
    }
		const { code, msg } = await addUserVoteApi({activityId:activityId.value,imgUrl:pic.value,saying:content.value});
		if (code === 200) {
		  uni.showToast({
		    icon: "none",
		    title: msg,
		  });
		  setTimeout(()=>{
			  uni.navigateBack()
		  },500)
		}
	}else{
		if (!pic.value || pic.value === '') {
			uni.showToast({
				icon:'none',title:`请上传${title.value}`
			})
			return false
		}
		if (!content.value || content.value === '') {
			uni.showToast({
				icon:'none',title:`请上传内容`
			})
			return false
		}
		const formData = {activityId:activityId.value,imgVideoUrl:pic.value,challengeQuote:content.value,clockInType:activityData.value.clockInType}
		const { code, msg } = await doSign(formData)
		if (code === 200) {
		  uni.showToast({
		    icon: "none",
		    title: msg,
		  });
		  setTimeout(()=>{
			  uni.navigateBack()
		  },500)
		}
	}
}

// const handleShowModal = () => {
// 	showModal.value = true
// }
// const handleClose = () => {
// 	showModal.value = false
// }
</script>

<style lang="less" scoped>
.box{
	position: relative;
	background-color: #F6F8FC;
	display: flex;
	flex-direction: column;
	align-items: center;
	.head{
		width: 100vw;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		.list_1{
			width: 620rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
			.item_1{
				width: 620rpx;
				height: 180rpx;
				display: flex;
				justify-content: space-between;
				background-color: #EFF1F5;
				padding-top: 10rpx;
				padding-left: 30rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				.l{
					display: flex;
					flex-direction: column;
          position: relative;

					.title{
						font-size: 30rpx;
						font-weight: bold;
            padding-right: 10rpx;
					}
					.time{
						color: #969998;
						height: 40rpx;
						font-size: 24rpx;
						margin-top: 14rpx;
						display: flex;
						image{
							width: 26rpx;
							height: 26rpx;
							border-radius: 50%;
							margin-right: 10rpx;
              position: relative;
              top: 4rpx;
						}
					}
					.btn{
						position: absolute;
            bottom: 10rpx;
            left: 10rpx;
						width: 100rpx;
						height: 30rpx;
            line-height: 30rpx;
						background-color: #ffffff;
						color: #FA8E05;
						font-size: 20rpx;
						font-weight: bold;
						text-align: center;
						border-radius: 12rpx;
						&.bin{
							color: #5794F1;
						}
						&.bout{
							color: #969696;
						}
					}
				}
				.r{
					display: flex;
					justify-content: center;
					margin-right: 20rpx;
					image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 15rpx;
					}
				}
			}
		}

	}
	.main{
		margin-top: 20rpx;
		width: 100vw;
		height: 75vh;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		.media{
			width: 640rpx;
			display: flex;
			margin-top: 20rpx;
			flex-direction: column;
			.title{
				font-size: 36rpx;
				font-weight: bold;
			}
			.box{
				width: 640rpx;
				margin-top: 20rpx;
				background-color: #EFF1F5;
				height: 300rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;
				image{
					width: 50rpx;
					height: 50rpx;
				}
			}
			.file{
				width: 640rpx;
				margin-top: 30rpx;
				display: flex;
				align-items: flex-end;
				image{
					width: 450rpx;height: 450rpx;border-radius: 25rpx;
				}
				.btn{
					font-size: 24rpx;color: #969998;
					width: 120rpx; height: 40rpx; border-radius: 20rpx;line-height: 40rpx; text-align: center;background-color: #EFF1F5;
				}
			}
		}
		.words{
			position: relative;
			width: 640rpx;
			display: flex;
			margin-top: 30rpx;
			flex-direction: column;
			.title{
				font-size: 36rpx;
				font-weight: bold;
			}
			.text{
				width: 640rpx;
				margin-top: 20rpx;
				background-color: #EFF1F5;
				height: 300rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;
				.ta{
					padding-top: 10rpx;
					padding-left: 10rpx;
				}
			}
			.num{
				position: absolute;
				right: 5rpx;
				bottom: 5rpx;
				color: #97999B;
			}
		}
	}

	.foot{
		position: fixed;
		z-index: 1;
		bottom: 0;
		width: 100vw;
		background-color: #F6F8FC;
		.box{
			background-color: #ffffff;
			width: 100vw;
			height: 140rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			// .btn_l{
			// 	width: 295rpx;
			// 	height: 60rpx;
			// 	border: 1rpx solid #00B689;
			// 	text-align: center;
			// 	line-height: 60rpx;
			// 	color: #00B689;
			// 	border-radius: 50rpx;
			// 	font-weight: bold;
			// }
			.btn_r{
				width: 680rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				color: #ffffff;
				border-radius: 50rpx;
				background: linear-gradient(to right,#01E4BF,#0080DB);
				&.over{
					background: linear-gradient(to right,#575757,#E4E4E4);
				}
			}
		}
	}
	.modal{
		position: fixed;
		top: 20vh;
		left: 75rpx;
		z-index: 2;
		width: 600rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		.box{
			width: 600rpx;
			height: 260rpx;
			border-radius: 25rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #ffffff;
			.h{
				font-size: 36rpx;font-weight: bold;margin-top: 20rpx
			}
			.m{
				margin-top: 20rpx;
				width: 450rpx;
				height: 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.btn{
					width: 200rpx;
					height: 60rpx;
					border-radius: 30rpx;
					font-size: 30rpx;
					text-align: center;
					line-height: 60rpx;
					background-color: #EFF1F5;
					&.sel{
						color: #ffffff;
						background-color: #5691F5;
					}
				}
			}
			.f{
				margin-top: 30rpx;
				color: #0080DB;
				font-size: 30rpx;
			}

		}
		.close{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background-color: #ffffff;
			opacity: 0.8;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 80%;
				height: 80%;
			}
		}
	}
	.mask{
		position: fixed;
		bottom: 0;
		z-index: 1;
		width: 100vw;
		height: 100vh;
		background-color: #000000;
		opacity: 0.5;
	}
}
</style>
